<template>
	<view :class="[primarySize()]">
		<view class="page-foot bg-white">
			<view class="ptb10 plr30" @click="bindSubmit()">
				<view class="btn1">提交</view>
			</view>
		</view>
		<view class="container">
			<view class="p30">
				<view class="box1">
					<view class="flex-box item" style="border-top: none;">
						<view class="fs30 col3 info_name">专业技能名称</view>
						<input name="skill_name" maxlength="10" v-model="model.skill_name" type="text" placeholder="请填写"
							placeholder-class="col9" class="flex-grow-1 tr col3"></input>
					</view>
					<multi-select :items="levels" name_key="name" :vlaue="model.level_id" @change="bindLevelChange">
						<view class="flex-box item">
							<view class="fs30 col3 info_name">熟悉程度</view>
							<view class="flex-grow-1 tr pr20"
								:class="[getListItemById(levels, model.level_id)?'col3':'col9']">
								{{getListItemAttrById(levels,model.level_id,'name','请选择')}}
							</view>
							<image src="/static/public/arrow-r.png" class="arrow-r"></image>
						</view>
					</multi-select>
				</view>
			</view>
		</view>
		</form>
	</view>
</template>

<script>
	const app = getApp()
	import multiSelect from '@/components/multi-select/multi-select.vue';
	var validate = require("../../xilu/validate.js");
	export default {
		components: {
			multiSelect
		},
		data() {
			return {
				model: {},
				levels: [],
				finishTexts: ['未毕业', '已毕业'],
				finish: null, //是否已经毕业, 判断是否显示毕业时间选择
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			this.getOpenerEventChannel().on('dataTransfer', data => {
				this.model = Object.assign({}, data.model);
				//创建一份浅拷贝, 不影响上一页的值
			});
			this.$util.getSkillLevels(true).then(items => {
				this.levels = items
			});
		},
		methods: {
			bindLevelChange(e) {
				this.model.level_id = this.levels[e.indexValues].id
				this.$forceUpdate()
			},
			bindSubmit(event) {
				let data = this.model;
				var rules = [{
					name: 'skill_name',
					nameChn: '专业技能名称',
					rules: ['require'],
					errorMsg: {
						require: '请填写专业技能名称'
						
					}
				}, {
					name: 'level_id',
					nameChn: '熟悉程度',
					rules: ['require', ],
					errorMsg: {
						require: '熟悉程度必须选择'
					}
				}]
				if (!validate.check(data, rules)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				data.module = 'skill';
				this.$core.post({
					url: 'xilujob.user/save_module',
					data: data,
					success: ret => {
						this.getOpenerEventChannel().emit('dataTransfer', {
							model: ret.data.model,
							complete_percent: ret.data.complete_percent
						});
						uni.navigateBack();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info_name {
		width: 120rpx;
		text-align-last: justify;
		white-space: nowrap
	}

	.info_item input {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right
	}

	.info_item picker {
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		padding-right: 15rpx
	}

	.ml0 {
		margin-left: 0
	}

	.box1 {
		margin-top: 20rpx;
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 10rpx 30rpx;

		.item {
			border-top: 1px solid #F4F4F4;
			height: 104rpx;
		}
	}
</style>